<template>
	<view class="conten">
		<!-- 顶部 -->
		<view class="header">
			<view style="width: 100vw" :style="{height:menuButtonInfo}"></view>
			<view class="header_title">
				<image class="icon" src="../../static/msg/back_icon.png" mode="" @click="back"></image>
				<view class="text global-font">
					消息
				</view>
			</view>
		</view>
		<!-- 消息 -->
		<scroll-view class="chat_list" scroll-y :scroll-top='gd_top'>
			<view class="scroll_box">
				<!-- 占位 -->
				<view class="top_seize" :style="{height:top_height+'px'}">

				</view>
				<view v-for="(jl_item,jl_index) in chat_record" :key="index">
					<view class="jl_title f_z">
						{{jl_item.datetime}}
					</view>
					<view class="item" v-for="(item,index) in jl_item.data" :key="index">
						<!-- 别人的消息 -->
						<view class="item_box" v-if="item.sender=='you'">
							<u-avatar :src='item.session_user.avatar' size='82rpx' mode="aspectFill"></u-avatar>
							<image class="msg_icon" src="../../static/msg/msg_left.png" mode=""></image>
							<view class="msg_box global-font f_j">
								<view class="msg">
									{{item.message}}
								</view>
							</view>
						</view>
						<!-- 自己的消息 -->
						<view class="item_box_right" v-else>
							<view class="msg_box global-font f_j">
								<view class="msg_right ">
									{{item.message}}
								</view>
							</view>
							<image class="msg_icon_right" src="../../static/msg/msg_right.png" mode=""></image>
							<u-avatar :src='item.user.avatar' size='82rpx' mode="aspectFill"></u-avatar>
						</view>
					</view>
				</view>

				<!-- 占位 -->
				<view class="bottom_seize" :style="{paddingBottom:bottom_seize_padding+'rpx'}">

				</view>
			</view>
		</scroll-view>
		<!-- 底部 -->
		<view class="bottom" :style="{paddingBottom:paddingBottom+'rpx',bottom:KeyboardHeight+'px'}">
			<!-- 功能区 -->
			<view class="chat_function">
				<view class="ipt">
					<u--textarea maxlength='250' :adjustPosition='false' autoHeight placeholder="请输入内容" border="none"
						v-model="chat_msg" @change="change" @confirm='send_confirm'></u--textarea>

				</view>
				<view class="btn" @click="send">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'user_info', 'chat_record', 'chat_id'])
		},
		data() {
			return {
				gd_top: 0, //滚动条位置
				// top占位高度
				top_height: 0,
				bot_height: 0,
				// 键盘高度
				KeyboardHeight: 0,
				// 底部安全区
				paddingBottom: 0,
				// 底部占位padding
				bottom_seize_padding: 0,
				arr: [{ type: 1 }, { type: 2 }, { type: 1 }, { type: 1 }, { type: 2 }, { type: 2 }, { type: 2 }, ],
				// 聊天消息
				chat_msg: '',
				// 发送图片
				send_img_show: false,
				session_id: '',
				df_id: '',
				chat_jl: [], //聊天记录
			}
		},
		onLoad(e) {
			// 监听键盘的弹出事件
			uni.onKeyboardHeightChange((res) => {
				if (res.height > 0) {
					// 键盘弹出时，根据键盘的高度调整固定元素的位置
					this.KeyboardHeight = res.height;
				} else {
					// 键盘收起时恢复初始位置
					this.KeyboardHeight = 0;
				}
			});
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res)
					this.paddingBottom = res.safeArea.bottom - res.safeArea.height
				}
			});
			this.df_id = e.id //聊天对方id
			this.set_df_id(e.id)
			this.get_call_id(e.id)
			// this.get_msg()
		},
		onReady() {
			this.$u.getRect('.header').then(res => {
				console.log(res);
				this.top_height = res.height
			})
			this.$u.getRect('.chat_function').then(res => {
				console.log(res);
				this.bot_height = res.height
			})
		},
		watch: {
			chat_record(val, old) {
				console.log('聊天记录变化了')
				this.set_gd()
			}
		},
		methods: {
			...mapMutations(['set_df_id']),
			send_confirm() {
				console.log('发送')
			},
			// 获取回话id
			get_call_id(id) {
				console.log(id, '获取会话id')
				let message = {
					c: 'Message',
					a: 'getSessionId',
					data: {
						user_id: this.user_info.id,
						csr_id: id
					}
				}
				this.$me_scoket.send(message)
			},
			// 发送消息
			send() {
				let message = {
					c: 'Message',
					a: 'sendMessage',
					data: {
						session_id: this.chat_id,
						message: this.chat_msg,
						message_type: 0,
						user_id: this.user_info.id
					}
				}
				this.$me_scoket.send(message)
				this.chat_msg = ''
			},
			// 设置滚动条位置
			set_gd() {
				this.$nextTick(() => {
					this.$u.getRect('.scroll_box').then(rect => {
						console.log(rect);
						this.gd_top = rect.height
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.conten {
		background: #F8F9FC;
		min-height: 100vh;
		// display: flex;
		// flex-direction: column;
	}

	.header {
		position: fixed;
		top: 0;
		padding: 0rpx 44rpx;
		background: white;
		padding-bottom: 20rpx;
		z-index: 10000000;

		.header_title {
			display: flex;
			align-items: center;

			.icon {
				width: 52rpx;
				height: 52rpx;
			}

			.text {
				margin-left: 260rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.chat_list {
		padding: 10rpx 44rpx;
		box-sizing: border-box;
		height: 100vh;
		// background: red;
		flex: 1;

		.jl_title {
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 20rpx;
		}

		.top_seize {
			margin-bottom: 20rpx;
			// height: 200rpx;
		}

		.bottom_seize {
			padding-bottom: 800rpx;
			height: 140rpx;
		}

		.item {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			margin-bottom: 50rpx;

			.item_box {
				display: flex;

				.msg_icon {
					width: 20rpx;
					height: 20rpx;
					margin-right: -2rpx;
					margin-top: 30rpx;
					margin-left: 20rpx;
				}

				.msg_box {
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					background: white;
					padding: 12rpx 26rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
					// line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.msg {
						max-width: 400rpx;
					}

					.msg_right {}
				}
			}

			.item_box_right {
				display: flex;
				justify-content: flex-end;

				.msg_icon_right {
					width: 20rpx;
					height: 20rpx;
					margin-right: 20rpx;
					margin-top: 30rpx;
					margin-left: -5rpx;
				}

				.msg_box {
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					background: #2970FE;
					padding: 12rpx 26rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: white;
					// line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;


					.msg_right {
						max-width: 400rpx;
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		width: 100%;
		transition: all 0.2s;

		.chat_function {
			padding: 24rpx 50rpx;
			padding-bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.speech {
				width: 42rpx;
				height: 56rpx;
			}

			.ipt {
				margin: 0rpx 30rpx 0rpx 20rpx;
				// padding: 8rpx 18rpx;
				width: 506rpx;
				background: #F5F6F7;
				border-radius: 4rpx 4rpx 4rpx 4rpx;

				::v-deep .u-textarea {
					background: #F5F6F7;
				}
			}

			.chat_add {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.send_img {
			box-sizing: border-box;
			display: flex;
			padding: 0rpx 64rpx;
			height: 100rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 64rpx;

				.tu {
					width: 40rpx;
					height: 36rpx;
				}

				.pai {
					width: 46rpx;
					height: 36rpx;
				}
			}
		}

		.btn {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 10rpx;
			background: #EE4133;
			padding: 10rpx 15rpx;
		}
	}
</style>